{% extends "static/view/template.html" %}
{% block body %}
<link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet">

<div id="app">
    <div class="container">
        <div class="page-header">
        </div>

        <div class="page-header">
            <h1> <font color= #333333><center>Task Profiling Information (Table)</center></font>
            </h1>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <span>Filter percentage:</span>
        <select v-model="filterKey">
            <option selected></option>
            <option v-for="percent in percentList">{{percent}}</option>
        </select>
        </div>
    </div>
    <table id="table" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Task Type</th>
                <th>Percent</th>
                <th>Queue Time(ns)</th>
                <th>Exec Time(ns)</th>
                <th>Throughput(#/s)</th>
                <th>Cancelled(#)</th>
                <th>Aio Latency(ns)</th>
                <th>RPC Server Latency(ns)</th>
                <th>RPC Client Latency(ns)</th>
                <th>Timeout(#/s)</th>
            </tr>
        </thead>
     
        <tbody>
        </tbody>
    </table>
</div>

<script src="js/vue.js"></script>
<script src="js/table.js"></script>
{% endblock %}
